<template>
  <el-dialog title="批量导入项目" :visible.sync="importDialogVisible" width="40%">
    <div class="dialog_content">
      <div class="text">
        <p>使用说明：</p>
        <p>1.文件格式必须与模板完全一致，不支持导入加密文件；</p>
        <p>2.专家名称不能重复</p>
      </div>
      <p>
        <span>下载导入模板：</span>
        <el-button type="text" @click="downTemplates">下载模板</el-button>
      </p>
    </div>
    <div class="fileUpload">
      <span style="line-height: 28px">导入文件上传:</span>
      <el-upload class="upload-demo" drag action="#" :http-request="getUploadFile" :file-list="fileList" :on-remove="handleRemove"
        accept=".xls, .xlsx">
        <div style="font-size: 15px">
          <em>点击上传文件</em>
        </div>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="submitLoading" @click="submit">导入</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { downTemplateExpert } from '@/api/techTalents'

export default {
  props: {},
  data() {
    return {
      fileList: [],
      importDialogVisible: false,
      submitLoading: false
    }
  },
  watch: {},
  methods: {
    // 下载模板
    downTemplates() {
      // downTemplateExpert()
    },
    // 取消按钮
    show() {
      this.importDialogVisible = true
    },
    // 取消按钮
    cancel() {
      this.importDialogVisible = false
    },
    // 确定按钮
    submit() {
      if (this.fileList.length == 0) {
        this.$message.warning('请选择文件')
        return
      }
      this.submitLoading = true
      this.$emit('handleSubmit', this.fileList)
    },
    // 获取文件信息
    getUploadFile(file) {
      this.fileList = []
      this.fileList.push(file.file)
    },
    // 移除文件
    handleRemove() {
      this.fileList = []
    }
  }
}
</script>

<style lang="less" scoped>
  ::v-deep .el-dialog__header {
    text-align: left;
    background-color: #f2f2f2;
  }

  .fileUpload {
    display: flex;
    margin-top: 20px;
    margin-right: 5px;
  }

  .upload-demo {
    flex: 1;
  }

  ::v-deep .el-upload {
    width: 100%;
  }

  ::v-deep .el-upload-dragger {
    width: 100%;
    height: 28px !important;
    border-radius: 0;
    border: solid 1px #d7d7d7;
    align-self: center;
    padding: 3px;
    margin-left: 5px;
  }
</style>
